<template>
  <div>
    <Modal
      :value="modalState"
      :loading="loading"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="35%">
      <Form
        ref="lossModal"
        :model="form"
        :rules="ruleInline"
        style="width: 100%"
        :label-width="50">
        <div style="margin-left: 35px; margin-top: 30px">
          <div style="margin-bottom: 15px">
            <Icon type="md-checkmark-circle" size="30" color="#00cc33" />
            <span style="font-size: 16px; font-weight: bold; margin-left: 20px">流失客户备注信息</span>
          </div>
          <div v-if="row.state === '0' && detailTitle === '客户管理意向客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">性别：</div>
            <FormItem prop="sex" style="width: 250px; margin-left: 140px; margin-top: -23px">
              <Select v-model="form.sex" placeholder="请选择性别">
                <Option value="0">
                  女
                </Option>
                <Option value="1">
                  男
                </Option>
              </Select>
            </FormItem>
          </div>
          <div v-if="row.state === '0' && detailTitle === '客户管理意向客户'">
            <div style="margin-left: 60px; font-size: 16px; width: 120px">客户意向度：</div>
            <FormItem prop="want" style="width: 250px; margin-left: 140px; margin-top: -23px">
              <Select v-model="form.want" placeholder="请选择客户意向度">
                <Option value="3">
                  意向度很强烈
                </Option>
                <Option value="2">
                  意向度较强
                </Option>
                <Option value="1">
                  意向度一般
                </Option>
                <Option value="0">
                  意向度不强
                </Option>
              </Select>
            </FormItem>
          </div>
          <div v-if="row.state === '0' && detailTitle === '客户管理意向客户'">
            <div style="margin-left: 60px; font-size: 16px; width: 120px">意向商品：</div>
            <FormItem prop="gid" style="width: 250px; margin-left: 140px; margin-top: -23px">
              <Select v-model="form.gid">
                <Option v-for="item in goodsList" :value="item.id.toString()" :key="item.id">
                  {{ item.name }}
                </Option>
              </Select>
            </FormItem>
          </div>
          <div v-show="detailTitle !== '客户管理流失客户'">
          <div style="margin-left: 60px; font-size: 16px; width: 120px">接待销售：</div>
          <FormItem prop="puid" style="width: 250px; margin-left: 140px; margin-top: -23px">
            <Select v-model="form.puid">
              <Option v-for="item in nameList" :value="item.id.toString()" :key="item.id">
                {{ item.uname }}
              </Option>
            </Select>
          </FormItem>
        </div>
          <FormItem prop="remarks" style="width: 80%">
            <Input v-model="row.remarks" type="textarea" :rows="4" placeholder="请输入流失客户备注信息" />
          </FormItem>
          <div style="color: red; margin-left: 50px; font-size: 15px">确认后客户进入流失客户列表</div>
        </div>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'LossModal',
  props: {
    row: null,
    detailTitle: null
  },
  data () {
    return {
      title: '',
      loading: true,
      form: {
        sex: '',
        want: '',
        tname: '',
        puid: '',
        gid: ''
      },
      ruleInline: {
        sex: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }
        ],
        want: [
          {
            required: true,
            message: '请选择客户意向度',
            trigger: 'change'
          }
        ],
        gid: [
          {
            required: true,
            message: '请选择意向商品',
            trigger: 'change'
          }
        ],
        puid: [
          {
            required: true,
            message: '请选择接待销售',
            trigger: 'change'
          }
        ]
        // tel: [
        //   { required: true, message: '手机号不能为空', trigger: 'blur' }
        // ]
      }
    }
  },
  updated () {
    this.title = '流失客户备注信息'
  },
  computed: {
    ...mapState({
      // row: state => state.taskList.row,
      modalState: state => state.modal.lossModalState,
      nameList: state => state.arrive.nameList,
      goodsList: state => state.goodService.goodsList
    })
  },
  methods: {
    ...mapActions(['updateLossModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.lossModal.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('loss-valid', {
          id: this.row.id,
          remarks: this.row.remarks,
          tname: this.form.tname,
          want: this.form.want,
          sex: this.form.sex,
          puid: this.form.puid,
          gid: this.form.gid,
          gname: this.form.gid ? this.goodsList.filter((item) => item.id.toString() === this.form.gid)[0].name : '',
          state0: 1
        })
        this.$refs['lossModal'].resetFields()
      })
    },
    cancel () {
      this.updateLossModalState(false)
      this.$refs['lossModal'].resetFields()
    }
  }
}
</script>
